<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.lgbanner{
  width: 100%;
  height: 560px;
  background: url(/static/img/lgbanner5.jpg) center top;
  position: relative;
  overflow: hidden;
  h2{
    font-weight: normal;
    color: #666;
  }
}
.zy{
  float: left;
  font-size: 20px;
  color: white;
  margin-top: 100px;
}
.lgcontent{
  width: 960px;
  margin: auto;
  position: relative;
}
.lgcard{
  width: 360px;
  margin-top: 40px;
 float: right;
 border-radius: 2px;
 padding: 0px 20px;
}
.lgitem{
  margin-bottom: 12px;
  overflow: hidden;
}
.lgbtn{
  padding: 9px 60px !important;
}
.lgma{
  position: absolute;
  right: -146px;
  width: 140px;
  text-align: center;
  padding: 0px;
  top:40px;
  border-radius: 2px;
  color: #777;
  img{
    width: 100%;
    margin: auto;
  }
}
.lgbox{
  overflow: hidden;
  margin: auto;
  width: 960px;
  background: white;
}
.lgboxs{
  padding-top: 40px;
  background-color: white;
}
.gongg{
  .el-card__body{
    padding: 12px 20px !important;
    overflow: hidden;
    .pull-left{
      cursor: pointer;
      margin-right: 30px;
    }
    .pull-right{
      cursor: pointer;
    }
    i{
      margin-right: 10px;
      color: #999;
    }
    .el-tag--mini{
      line-height: 14px;
      height: 16px;
      margin-left: 4px;
      margin-right: 6px;
    }
  }
  .news:hover{
    color: #F56C6C;
  }
}
.lgfl{
  margin-top: 60px;
  padding-left: 8px;
  margin-bottom: 30px;
  color: #333;
  text-align: center;
  h2{
    margin: 0;
    font-weight: normal;
  }
  p{
    margin: 0;
    margin-top:8px;
  }
}
.lgyw{
  margin-top: 24px;
  margin-bottom: 120px;
  .lgcbox{
    text-align: center;
    .el-card__body{
      padding: 60px 40px;
      cursor: pointer;
    }
    h4{
      font-size: 18px;
      font-weight: normal;
    }
    p{
      color: #999999;
    }
    img{
      width: 108px;
      margin: auto;
    }
  }
}
</style>
<template>
  <div class="login">
   <div class="lgbanner">
      <div class="lgcontent">
        <div class="zy">诚信服务， 精益求精</div>
        <el-card class="lgcard">
          <h2>登录</h2>
          <el-form ref="form" :model="form" label-width="0px">
              <el-input class="lgitem" v-model="form.username">
                <template slot="prepend"><i class="fa fa-user"></i></template>
              </el-input>
              <el-input class="lgitem" type="password" @keyup.enter.native="onSubmit" v-model="form.password">
                <template slot="prepend"><i class="fa fa-lock"></i></template>
              </el-input>
              <div class="lgitem">
                <el-switch style="margin-right:10px;" v-model="remeber"></el-switch>记账账号
                <div style="color:#999999;" class="pull-right">忘记密码</div>
              </div>
            <el-form-item>
              <el-button class="lgbtn" type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="lgma">
          <img src="/static/img/qcord.png" alt="">
          扫描二维码立即体验小程序
        </el-card>
      </div>
   </div>
   <div class="lgboxs">
      <div  class="lgbox">
      <div class="lgfl">
        <h2>产品</h2>
        <p>Merchandise</p>
      </div>
      <div class="lgyw">
        <el-row :gutter="20">
        <el-col :span="8">
          <div class="lgcbox">
            <el-card shadow="hover">
              <img src="/static/img/s_1.png" alt="">
              <h4>小程序定制化服务</h4>
              <p>给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。</p>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="lgcbox">
            <el-card shadow="hover">
              <img src="/static/img/s_2.png" alt="">
              <h4>商业大数据应用</h4>
              <p>给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。</p>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="lgcbox">
            <el-card shadow="hover">
              <img src="/static/img/s_3.png" alt="">
              <h4>网络应用开发服务</h4>
              <p>给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。</p>
            </el-card>
          </div>
        </el-col>
      </el-row>
      </div>
      </div>
   </div>
  </div>
</template>

<script>
export default {
 
  data() {
    return {
      id:'',
      remeber:false,
      form:{
        username:'',
        password:'',
      }
    };
  },
  created(){
   this.storeNull(); 
  },
  mounted() {
     this.$store.commit("cactiveIndex", "");
     this.localget();
     this.storeNull();
  },
  methods: {
    storeNull(){
      this.$store.commit('chomePage',{});
    },
    async onSubmit(){
        for(let i of Object.values(this.form)){
          if(!i){
              this.$message({
                message: "请填写完整",
                type: "info"
              });
              return null;
          }
        }
        try {
          let result = await this.$http.post("/admin/login", this.form);
          if(result.data.data==1){
            this.getmessage(1,'登录');
            this.$store.commit('clogin',true);
            this.$store.commit('cadmin',result.data.result);
            this.$store.commit("cleftnav", result.data.tab==null?'':result.data.tab.array[0].label);
            this.localset();
            if(result.data.result.level==1){
              this.goto('/admin')
            }else if(result.data.result.level==3){
              this.goto('/shophome')
            }else{
              this.$message({message:'你的账号没有权限登录！',type:'error'});
            }
          }else if(result.data.data==2){
            this.$message({message:'该账号不存在',type:'error'});
          }else if(result.data.data==3){
            this.$message({message:'密码错误',type:'error'});
          }else{
            this.getmessage(2,'登录');
          }
        } catch (error) {
          console.log(error)
        }
     },
     
     localset(){
       if(this.remeber){
         window.localStorage.setItem('username',this.form.username);
         window.localStorage.setItem('remeber',this.remeber);
       }else{
         window.localStorage.clear();
       }
     },
     localget(){
       let username = window.localStorage.getItem('username');
       let remeber = window.localStorage.getItem('remeber');
   
       if(username && remeber){
          this.form.username = username;
          this.remeber = remeber=='true'?true:false;
       }
       
     }
  }
};
</script>